/**
* Add by LG 2024-10-12
* 供货商添加
*/
<template>
  <kdx-content-bar>
    <div class="good-channel-add">
      <div class="add-channel-content">
        <kdx-form-title>{{ type }}</kdx-form-title>
        <Form ref="form" :model="model" :rules="rules" :label-width="120">
          <FormItem label="供货商名称：" prop="name">
            <Input type="text" v-model="model.name" placeholder="请输入供货商名称" class="width-160" maxlength="100"/>
          </FormItem>
          <FormItem label="是否线下类型：" class="r-form-item-checkbox">
            <RadioGroup v-model="model.is_offline">
              <Radio :label="1">是</Radio>
              <Radio :label="0">否</Radio>
            </RadioGroup>
            <kdx-hint-text content="线下类型属于运营线下对接的供货商，线上类型属于开发线上对接过的供货商。"></kdx-hint-text>
          </FormItem>
          <FormItem label="联系电话：" prop="mobile">
            <Input type="text" v-model="model.mobile" placeholder="请输入联系电话" class="width-160" maxlength="11"/>
          </FormItem>
          <FormItem label="微信：" prop="wx">
            <Input type="text" v-model="model.wx" placeholder="请输入微信" class="width-160" maxlength="20"/>
          </FormItem>
          <FormItem label="简介备注：" prop="remark">
            <Input type="textarea" v-model="model.remark" placeholder="请输入简介备注" class="width-600"
                   maxlength="200" show-word-limit/>
          </FormItem>
          <FormItem label="供货商内商品：" prop="goods_id">
            <div>
              <Button class="default-primary" @click="addShop">+添加</Button>
            </div>
            <div class="goods-box" v-show="shop.data && shop.data.length > 0">
              <div class="goods-table">
                <Table
                    ref="table"
                    :columns="shop.columns"
                    :data="shop.data"
                ></Table>
              </div>
              <div class="footer-page" v-show="shop.total > 10">
                <kdx-page-component
                    ref="page"
                    :total="shop.total"
                    @on-change="handlePageChange"
                ></kdx-page-component>
              </div>
            </div>
          </FormItem>
        </Form>
      </div>
    </div>
    <template #btn>
      <Button class="primary-long" @click="handleSave">保存</Button>
      <Button class="default-long" @click="goBack">返回列表</Button>
    </template>
    <!--商品选择器-->
    <goods-selector
        v-model="selector.value"
        :multiple="true"
        :current-list="selector.data"
        @on-change="selectorChange"
        @on-cancel="selectorCancel"
    ></goods-selector>
  </kdx-content-bar>
</template>

<script>
    import GoodsSelector from "@/components/selector/GoodsSelector.vue";

    export default {
        name: "index",
        components: {
          GoodsSelector
        },
        data() {
            return {
                model: {
                    name: '',
                    is_offline: '1',
                    goods_id: [],
                    mobile: '',
                    wx: '',
                    remark: ''
                },
                rules: {
                    name: [{
                        required: true,
                        message: '供货商名称必填'
                    }],
                    // goods_id: [{
                    //     required: true,
                    //     type: 'array',
                    //     min: 1,
                    //     message: '供货商内商品必填'
                    // }]
                },
              shop: {
                columns: [
                  {
                    title: '商品',
                    key: 'shop',
                    minWidth: 200,
                    render: (h, params) => {
                      let getType;
                      switch (params.row.type) {
                        case '0':
                          getType = {
                            goodsText : '实'
                          }
                          break;

                        case '1':
                          getType = {
                            goodsText : '虚'
                          }
                          break;

                        case '2':
                          getType = {
                            goodsText: '密'
                          }
                          break;

                        case '3':
                          getType = {
                            goodsText: '预'
                          }
                          break;
                      }
                      return h(
                          'div',
                          {
                            class: {
                              'shop-box': true
                            }
                          },
                          [
                            // image
                            h(
                                'div',
                                {
                                  class: {
                                    image: true
                                  }
                                },
                                [
                                  h('img', {
                                    attrs: {
                                      src: this.$media(
                                          params.row.thumb
                                      )
                                    },
                                    on: {
                                      error: e => {
                                        this.replaceImage(e)
                                      }
                                    }
                                  })
                                ]
                            ),
                            // 商品标题
                            h(
                                'div',
                                {
                                  class: {
                                    content: true
                                  }
                                },
                                [
                                  h(
                                      'div',
                                      {
                                        class: {
                                          'content-text': true
                                        }
                                      },
                                      [
                                        // 多规格标志
                                        h(
                                            'span',
                                            {
                                              class: {
                                                mark: true
                                              },
                                              style: {
                                                display:
                                                    params.row
                                                        .has_option ===
                                                    '1'
                                                        ? 'inline-block'
                                                        : 'none'
                                              }
                                            },
                                            '多'
                                        ),
                                        // 实体、虚拟商品标志
                                        h(
                                            'span',
                                            {
                                              class: {
                                                mark: true,
                                                real: params.row.type === '0',
                                                virtual: params.row.type === '1',
                                                secret: params.row.type === '2',
                                              }
                                            },
                                            getType.goodsText
                                        ),
                                        h(
                                            'span',
                                            {
                                              class: {
                                                text: true
                                              }
                                            },
                                            params.row.title
                                        )
                                      ]
                                  )
                                ]
                            )
                          ]
                      )
                    }
                  },
                  {
                    title: '价格',
                    key: 'price',
                    minWidth: 80,
                    render: (h, params) => {
                      // 多规格
                      if (params.row.has_option === '1') {
                        return (
                            <div class="price">
                              <span>￥{params.row.min_price} ~ ￥{params.row.max_price}</span>
                            </div>
                        );
                      }
                      return (
                          <div class="price">
                            <span>￥{params.row[params.column.key]}</span>
                          </div>
                      );
                    }
                  },
                  {
                    title: '库存',
                    key: 'stock',
                    minWidth: 80,
                    render: (h, params) => {
                      let stock = params.row[params.column.key]
                      return (
                          <div class="inventory">
                            <span>{stock}</span>
                          </div>
                      );
                    }
                  },
                  {
                    title: '操作',
                    key: 'action',
                    width: 100,
                    render: (h, params) => {
                      return h(
                          'div',
                          {
                            class: {
                              action: true
                            }
                          },
                          [
                            h(
                                'Button',
                                {
                                  props: {
                                    type: 'text'
                                  },
                                  on: {
                                    click: () => {
                                      this.deleteShop(
                                          params.index,
                                          params.row
                                      )
                                    }
                                  }
                                },
                                '删除'
                            )
                          ]
                      )
                    }
                  }
                ],
                data: [],
                total: 0
              },
              selector: {
                value: false,
                data: []
              },
              page: {
                pageSize: 10,
                pageNumber: 1 // 页码
              },
              id: 0,
              loading: false,
              type: '新增供货商'
            };
        },
        methods: {
            getData() {
                this.$api.goodsApi.getChannel({ id: this.id })
                    .then(res => {
                      if (res.error === 0) {
                        this.model = res.data
                        this.selector.data = res.data.goods || []
                        delete this.model.goods
                        this.model.goods_id = this.selector.data.map(
                            item => item.id
                        )
                        this.getPageShopData()
                      }
                    })
                    .catch()
            },
            selectorChange(list) {
              this.selector.data = list
              this.model.goods_id = list.map(item => item.id)
              this.resetPage()
              this.getPageShopData()
              this.selectorCancel()
              // console.log(this.shop.data)
            },
            selectorCancel() {
              this.selector.value = false
            },
            addShop() {
              this.selector.value = true
            },
            // 删除组内商品
            deleteShop(index) {
              this.$Modal.confirm({
                title: '提示',
                content: '确认删除该商品？',
                onOk: () => {
                  let pageIndex =
                      (this.page.pageNumber - 1) * this.page.pageSize + index
                  this.selector.data.splice(pageIndex, 1)
                  this.model.goods_id.splice(pageIndex, 1)
                  this.resetPage()
                  this.getPageShopData()
                },
                onCancel: () => {}
              })
            },
            handlePageChange(page) {
              this.page = page
              this.getPageShopData()
            },
            // 重置页码信息
            resetPage() {
              this.page.pageSize = 10
              this.page.pageNumber = 1
              this.$refs['page'].reset()
            },
            // 获取当前显示的商品
            getPageShopData() {
              this.shop.total = this.selector.data.length
              let start = this.page.pageSize * (this.page.pageNumber - 1),
                  end = this.page.pageSize * this.page.pageNumber
              this.shop.data = this.selector.data.slice(start, end)
            },
            handleSave() {
              this.$refs['form'].validate(valid => {
                if (valid) {
                  if (this.id) {
                    this.editChannel()
                  } else {
                    this.addChannel()
                  }
                }
              })
            },
            addChannel() {
              this.loading = true
              this.$api.goodsApi.addChannel(this.model).then(res => {
                this.loading = false
                if (res.error === 0) {
                  this.$Message.success('供货商新增成功')
                  this.$router.go(-1);
                }
              })
            },
            editChannel() {
              this.loading = true
              let params = Object.assign({}, this.model, { id: this.id })
              this.$api.goodsApi.editChannel(params).then(res => {
                this.loading = false
                if (res.error === 0) {
                  this.$Message.success('供货商修改成功')
                  this.$router.go(-1);
                }
              })
            },
            init() {
              this.id = this.$route.query.id || 0
              if (this.id) {
                this.getData()
                this.type = '修改供货商'
              } else {
                this.model = {
                  name: '',
                  is_offline: 1,
                  goods_id: []
                }
                this.shop.data = []
                this.type = '新增供货商'
              }
            },

            goBack() {
                this.$router.go(-1);
            }
        },
        mounted() {
            this.init();
        }
    };
</script>

<style scoped lang="scss">
.good-channel-add {
  background-color: #FFFFFF;
  min-height: 100%;
  position: relative;
  .add-channel-content {
    margin-top: 20px;
    background-color: #ffffff;
    height: 100%;
    padding: 40px;
    .goods-box {
      margin-top: 10px;
      border-radius: 2px;
      background-color: $background-color;
      padding: 20px;
      .goods-table {
        padding: 0 20px;
        background-color: #ffffff;
      }
    }
  }
  ::v-deep .ivu-table {
    td {
      .shop-box {
        display: flex;
        flex-wrap: nowrap;
        .image {
          width: 60px;
          height: 60px;
          margin-right: 10px;
          border-radius: 2px;
          border: 1px solid $border-color;
          box-sizing: border-box;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        .content {
          width: 100%;
          flex: 1;
          .content-text {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            height: 50px;
            padding: 10px 0;
            .mark {
              @include font-12-16;
              color: #ed4014;
              background-color: #ffefe6;
              border-radius: 2px;
              margin-right: 4px;
              display: inline-block;
              &:nth-last-child(2) {
                margin-right: 6px;
              }
              &.real {
                background-color: #F0FAFF;
                color: $brand-color;
              }
              &.virtual {
                background-color: #E6FFF9;
                color: #00C5C5;
              }
              &.secret {
                background-color: #FFCDD0;
                color: #FF000F;
              }
            }
            .text {
              @include font-14-20;
            }
          }
        }
      }
      .price {
        color: $text-first;
        @include font-14-20-bold;
        .icon {
          display: none;
          cursor: pointer;
        }
        &:hover {
          > .icon {
            display: inline-block;
          }
        }
      }
    }
  }
  .footer-page {
    background-color: #ffffff;
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
